HTML Links & Navigation

Published 1 month ago

Navigation is a crucial part of any website, and HTML links serve as the backbone of website navigation. Whether you’re linking to another page, opening a new tab, or creating internal navigation within a page, mastering HTML links is essential.

In this guide, we’ll cover:

Creating Hyperlinks (<a> tag)
Absolute vs. Relative Links
Opening Links in a New Tab
Adding Internal Page Navigation (Anchor Links)

1. Creating Hyperlinks (`<a>` Tag)

Hyperlinks allow users to navigate between different pages on the web. The <a> (anchor) tag is used to create hyperlinks in HTML.

Syntax:

<a href="https://example.com">Visit Example</a>

Explanation:

<a>: The anchor tag.
href: The attribute specifying the URL or location to navigate to.
"https://example.com": The destination URL.
The text between <a> and </a> is the clickable link text.

Example:

<a href="https://www.google.com">Go to Google</a>

This creates a clickable link that redirects users to Google when clicked.

2. Absolute vs. Relative Links

When adding links, you can use either absolute or relative URLs.

Absolute Links

An absolute link contains the full web address (including https:// or http://). These are commonly used for external websites.

Example:

<a href="https://www.example.com">Visit Example</a>

This link will take users to https://www.example.com.

Relative Links

A relative link points to a location within the same website. It does not include the domain name, making it shorter and more flexible.

Example:

<a href="about.html">About Us</a>

If this link is placed on index.html, clicking it will open about.html within the same domain.

Another Example (Linking to a Folder):

<a href="/blog/article.html">Read Article</a>

/blog/article.html refers to the article.html file inside the blog directory.

Key Differences:

Feature Absolute Link Relative Link Includes Domain? Yes No Works within the same site? Yes Yes Works across different domains? Yes No Common Usage External sites Internal links 3. Opening Links in a New Tab (`target="_blank"`)

By default, links open in the same tab. To open a link in a new tab, use the target="_blank" attribute.

Example:

<a href="https://www.example.com" target="_blank">Visit Example</a>

This will open the Example website in a new tab.

Security Tip: Use `rel="noopener noreferrer"`

For security and performance reasons, always add rel="noopener noreferrer" when using target="_blank".

Example:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

noopener: Prevents the new page from accessing the original page (security measure).
noreferrer: Stops the browser from sending referrer information to the new page.

4. Adding Internal Page Navigation (Anchor Links)

Anchor links allow users to navigate to specific sections within a webpage. This is useful for long pages with multiple sections.

How It Works:

Create an ID on the section you want to link to.
Link to that ID using #id_name.

Example:

<h2 id="contact">Contact Us</h2>
<a href="#contact">Jump to Contact Section</a>

The <h2> heading has an id="contact".
The <a> tag links to #contact, which scrolls the page to that section when clicked.

Smooth Scrolling Effect (CSS)

To make the scrolling effect smoother, add this CSS:

html {
  scroll-behavior: smooth;
}

This ensures a smooth transition when jumping to sections.

Conclusion

HTML links play a vital role in website navigation. To summarise:

Use the <a> tag to create hyperlinks.
Choose absolute links for external websites and relative links for internal navigation.
Use target="_blank" to open links in a new tab (with rel="noopener noreferrer" for security).
Use anchor links to navigate within the same page.

By mastering these link techniques, you’ll enhance your website’s usability and navigation.

Happy coding! 🚀

Obafemi Emmanuel